<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>手写防抖</title>
	</head>
	<body>
		<script>
            //函数防抖，就是指触发事件后，函数在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。
			// fn是你要调用的函数，delay是防抖的时间
			function debounce(fn, delay) {
				// timer是一个定时器
				let timer = null
				// 返回一个闭包函数，用闭包保存timer确保其不会销毁，重复点击会清理上一次的定时器
				return function () {
					// 保存事件参数，防止fn函数需要事件参数里的数据
					let arg = arguments
					// 调用一次就清除上一次的定时器
					clearTimeout(timer)
					// 开启这一次的定时器
					timer = setTimeout(() => {
						// 若不改变this指向，则会指向fn定义环境
						fn.apply(this, arg)
					}, delay)
				}
			}

			// 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
			// 用户名、手机号、邮箱输入验证；
			// 浏览器窗口大小改变后，只需窗口调整完后，再执行resize事件中的代码，防止重复渲染。
		</script>
	</body>
</html>
